<template>
    <el-form :inline="true" size="large">
        <el-form-item label="课程名称">
            <el-input v-model="formData.courseName" placeholder="请输入课程名称" clearable @clear="refreshPage"
                style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item label="分类名称">
            <el-select v-model="formData.classId" clearable @clear="refreshPage" placeholder="请选择分类名"
                style="width: 240px">
                <el-option v-for="item in classList" :key="item.id" :label="item.className" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="导师名称">
            <el-select v-model="formData.tutorId" clearable @clear="refreshPage" placeholder="请选择导师名"
                style="width: 240px">
                <el-option v-for="item in consultList" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="适用人群">
            <el-input v-model="formData.applicablePerson" placeholder="请输入适用人群" clearable @clear="refreshPage"
                style="width: 250px;"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getAllComm">搜索</el-button>
            <el-button type="primary" @click="adddate">新增课程</el-button>
            <el-button type="danger" @click="removeBatch">批量删除</el-button>
        </el-form-item>
    </el-form>
    <el-form>
        <el-table :data="visitList" border class="my-table" size="large" @selection-change="handleSelectionChange">
            <el-table-column type="selection" :selectable="selectable" width="55" />
            <el-table-column prop="courseName" label="课程名称" align="center">
                <template v-slot="scope">
                    <div class="course-intro-truncate">{{ scope.row.courseName }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="courseImg" label="缩略图" align="center" width="175">
                <template v-slot="scope">
                    <img :src="`http://localhost:8081/sfzy${scope.row.courseImg}`" alt="缩略图" class="table-img">
                </template>
            </el-table-column>
            <el-table-column prop="totalTime" label="总时长" align="center"></el-table-column>
            <el-table-column prop="videoCount" label="课程数量" align="center"></el-table-column>
            <el-table-column prop="learningCount" label="学习量" align="center"></el-table-column>
            <el-table-column prop="courseIntroduction" label="课程简介" align="center">
                <template v-slot="scope">
                    <div class="course-intro-truncate">{{ scope.row.courseIntroduction }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="applicablePerson" label="适用人群" align="center">
                <template v-slot="scope">
                    <div class="course-intro-truncate">{{ scope.row.applicablePerson }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="learningGain" label="学习收获" align="center">
                <template v-slot="scope">
                    <div class="course-intro-truncate">{{ scope.row.learningGain }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="subscriptionNotice" label="订阅须知" align="center">
                <template v-slot="scope">
                    <div class="course-intro-truncate">{{ scope.row.subscriptionNotice }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="originalPrice" label="课程原价" align="center"></el-table-column>
            <el-table-column prop="discountedPrice" label="折扣价" align="center"></el-table-column>
            <el-table-column prop="courseClass.className" label="课程分类" align="center"></el-table-column>
            <el-table-column prop="consult.name" label="心理导师" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template v-slot="scope">
                    <el-link type="primary" @click="updata(scope.row)">修改</el-link>
                    <el-link type="danger" @click="handleDownshelf(scope.row)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>
    </el-form>
    <el-dialog v-model="dialogFormVisible" :title="title" width="525" @close="cancel">
        <el-form :model="adddate" class="form1">
            <el-form-item label="课程名称" :label-width="formLabelWidth">
                <el-input v-model="visitData.courseName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="缩略图" :label-width="formLabelWidth">
                <el-upload drag class="avatar-uploader" method="post" action="http://localhost:8081/sfzy/upload"
                    :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="form.imgUrl" :src="`${form.imgUrl}`" class="avatar" />
                    <div v-else>
                        <el-icon class="avatar-uploader-icon">
                            <Plus />
                        </el-icon>
                    </div>
                </el-upload>
            </el-form-item>
            <el-form-item label="课程简介" :label-width="formLabelWidth">
                <el-input v-model="visitData.courseIntroduction" autocomplete="off" />
            </el-form-item>
            <el-form-item label="适用人群" :label-width="formLabelWidth">
                <el-input v-model="visitData.applicablePerson" autocomplete="off" />
            </el-form-item>
            <el-form-item label="学习收获" :label-width="formLabelWidth">
                <el-input v-model="visitData.learningGain" autocomplete="off" />
            </el-form-item>
            <el-form-item label="订阅须知" :label-width="formLabelWidth">
                <el-input v-model="visitData.subscriptionNotice" autocomplete="off" />
            </el-form-item>
            <el-form-item label="课程原价" :label-width="formLabelWidth">
                <el-input v-model="visitData.originalPrice" autocomplete="off" @input="validateNumber('originalPrice')"/>
            </el-form-item>
            <el-form-item label="折扣价" :label-width="formLabelWidth">
                <el-input v-model="visitData.discountedPrice" autocomplete="off" @input="validateNumber('discountedPrice')"/>
            </el-form-item>
            <el-form-item label="课程分类" :label-width="formLabelWidth">
                <el-select v-model="visitData.classId" clearable @clear="refreshPage" placeholder="请选择分类名" style="width: 240px">
                    <el-option v-for="item in classList1" :key="item.id" :label="item.className" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="心理导师" :label-width="formLabelWidth">
                <el-select v-model="visitData.tutorId" clearable @clear="refreshPage" placeholder="请选择导师名" style="width: 240px">
                    <el-option v-for="item in consultList1" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="handleSubmit">确定</el-button>
            </div>
        </template>
    </el-dialog>
    <el-row>
        <el-pagination :page-sizes="[4, 10, 30, 40]" :size="size" :disabled="disabled" :background="background"
            :default-page-size="4" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="pageNumChange" />
    </el-row>
</template>

<script setup>
//获取城市内容
import citydata from '@/assets/citydata';
//icon图标
import { Search, Refresh, Edit, CloseBold, Plus, Share, ArrowRight } from '@element-plus/icons-vue'
//信息提示
import { ElForm, ElMessage, ElMessageBox, uploadProps } from 'element-plus';
//getCurrentInstance获取全局对象，用于获取axios属性
//onMounted页面加载后开始挂载执行
//watchEffect属性监听器，daterange响应后开始执行函数，这里用于获取开始时间和结束时间
import { getCurrentInstance, onMounted, ref, watchEffect, onBeforeUnmount } from 'vue';
//接收全局对象
const CurrentInstance = getCurrentInstance()
//初始化添加弹框，使其不显示
const dialogFormVisible = ref(false)
//添加弹出框左边距
const formLabelWidth = '140px'
//获取全局对象挂载的naxios赋值给$http来代替naxios
const { $http } = CurrentInstance.appContext.config.globalProperties
//弹出框的标题
const title = ref("")
//代表active样式
const i = ref("")
//默认动态页码为0
const total = ref(0)
//动态方法，默认弹出框为add
const operationType = ref('add');
//课程分类数组
const classList = ref([]);
const classList1=ref([]);
//导师名称数组
const consultList = ref([]);
const consultList1 = ref([]);
let form = ref({
    imgUrl: ''
})
const imageUrl = ref('')
// 图片上传成功的钩子  
const handleAvatarSuccess = (response, uploadFile) => {
    // 保存相对路径到相关数据对象，以便传给后端
    const relativeImagePath = response.data;
    // 拼接完整的图片路径在弹出框中显示
    const fullImagePath = `http://localhost:8081/sfzy${response.data}`;
    imageUrl.value = URL.createObjectURL(uploadFile.raw);
    form.value.imgUrl = fullImagePath

    //传回数据库的路径
    visitData.value.courseImg = relativeImagePath;
};

onBeforeUnmount(() => {
    URL.revokeObjectURL(imageUrl.value);
});
//上传图片组件->上传图片之前触发的钩子函数
const beforeAvatarUpload = (rawFile) => {
    const allowedFormats = ['image/jpeg', 'image/png']; // 允许的文件格式
    if (!allowedFormats.includes(rawFile.type)) {
        this.$message.error('文件格式必须是 JPG 或 PNG！');
        return false;
    }
    else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}
//定义formData来接收访问地址的数据
const formData = ref({
    courseName: "",
    applicablePerson: "",
    classId: "",
    tutorId: "",
    pageNum: 1,// 页码
    pageSize: 4, // 每页展示条数
    ids: []//多选id
})
//定义的表格数据来存放访问地址中的数据
let visitList = ref([

])
let visitData = ref({
    id: "",
    courseName: "",
    courseImg: "",
    totalTime: "",
    videoCount: "",
    learningCount: "",
    courseIntroduction: "",
    applicablePerson: "",
    learningGain: "",
    subscriptionNotice: "",
    originalPrice: "",
    discountedPrice: "",
    classId: "",
    tutorId: "",
    del: "",
})
//监听函数，if else是为了防止访问空时报错，同时获取页面的开始时间和结束时间
watchEffect(function () {

})
//点击搜索的清除组件，刷新页面
function refreshPage() {
    getAllComm();
}
//生命周期中挂载到页面加载之后开始执行
onMounted(() => {
    getAllComm()
    getListComm()
    getListComm1()
})
//获取点击的分页页码并执行搜索功能
function pageNumChange(num) {
    formData.value.pageNum = num;
    getAllComm()
}
function handleSizeChange(size) {
    formData.value.pageSize = size;
    getAllComm()
}
// 时间格式转换函数，用于将秒数转换为时分秒格式
function formatTime(seconds) {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const remainingSeconds = seconds % 60;
    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
}
//搜索功能，将formData的定义初始属性传给访问地址，并传回来地址中的表格数据和各个属性
function getAllComm() {
    $http({
        method: "get",
        url: "http://localhost:8081/sfzy/course/page",
        params: formData.value
    }).then(res => {
        const list = res.data.data.list;
        // 遍历列表数据，先将毫秒值转换为秒数，再调用formatTime函数转换为时分秒格式
        list.forEach(item => {
            const seconds = Math.floor(item.totalTime / 1000);
            item.totalTime = formatTime(seconds);
        });
        visitList.value = list;
        total.value = res.data.data.total;
    })
}
function getListComm() {
    $http({
        method: "get",
        url: "http://localhost:8081/sfzy/courseClass"
    }).then(res => {
        classList.value = res.data.data;
        classList1.value = res.data.data;
    })
}
function getListComm1() {
    $http({
        method: "get",
        url: "http://localhost:8081/sfzy/consult/page?position=心理导师"
    }).then(res => {
        consultList.value = res.data.data.list;
        consultList1.value = res.data.data.list;
    })
}
// 新增分类函数
function addNewCategory() {
    $http({
        method: "post",
        url: "http://localhost:8081/sfzy/course",
        data: visitData.value
    }).then(res => {
        if (res.data.code === 200) {
            ElMessage.success("添加成功！");
        } else {
            ElMessage.error("添加失败");
        }
        dialogFormVisible.value = false;
        getAllComm();
        cancel();
    });
}
// 使添加框显示（新增分类）
function adddate() {
    dialogFormVisible.value = true;
    title.value = "新增课程";
    operationType.value = 'add';
    // 初始化相关数据（可根据实际需求补充更多初始化操作）
    visitData.value = {
        id:"",
        courseName: "",
        courseImg: "",
        totalTime: "",
        videoCount: "",
        learningCount: "",
        courseIntroduction: "",
        applicablePerson: "",
        learningGain: "",
        subscriptionNotice: "",
        originalPrice: "",
        discountedPrice: "",
        classId: "",
        tutorId: "",
        del: "",
    };
}
// 修改分类函数
function updateCategory(val) {
    $http({
        method: "put",
        url: "http://localhost:8081/sfzy/course",
        data: val
    }).then(res => {
        if (res.data.code === 200) {
            ElMessage.success("修改成功！");
        } else {
            ElMessage.error("修改失败");
        }
        dialogFormVisible.value = false;
        getAllComm();
        cancel();
    });
}
// 点击修改链接弹出修改框并执行修改操作
function updata(val) {
    dialogFormVisible.value = true;
    title.value = "修改课程";
    visitData.value = val;
    visitData.value.totalTime=0;
    operationType.value = 'modify';
    form.value.imgUrl = `http://localhost:8081/sfzy${val.courseImg}`
}
// 统一提交函数，根据操作类型调用相应函数
function handleSubmit() {
    if (operationType.value === 'add') {
        addNewCategory();
    } else if (operationType.value === 'modify') {
        updateCategory(visitData.value);
    }
}
//删除功能
function handleDownshelf(val) {
    if (formData.value.ids.length > 0) {
        ElMessage({
            type: 'warning',
            message: '已选择了多行，请使用批量删除功能进行操作！',
        });
        return;
    }
    ElMessageBox.confirm(
        '是否确认删除小区数据?',
        '删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            const { id } = val;
            $http({
                method: "delete",
                url: `http://localhost:8081/sfzy/course/${id}`,
                data: {}
            }).then(res => {
                if (res.data.code === 200) {
                    ElMessage.success("删除成功！");
                } else {
                    ElMessage.error("删除失败");
                }
                getAllComm();
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除操作',
            })
        })
}
//批量删除
const selectable = (row) => ![].includes(row.id)
const handleSelectionChange = (val) => {
    formData.value.ids = val.map(item => item.id);
}
function removeBatch() {
    ElMessageBox.confirm(
        '是否确认删除小区数据?',
        '删除',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            const idsArray = formData.value.ids;
            // 将数组idsArray中的元素拼接成字符串形式，用逗号分隔
            const idsStr = idsArray.join(',');

            $http({
                method: "delete",
                url: `http://localhost:8081/sfzy/course?ids=${idsStr}`,
                data: {}
            }).then(res => {
                if (res.data.code === 200) {
                    ElMessage.success("删除成功！");
                    // 判断当前页是否还有数据，如果没有则将页码减1
                    if (visitList.value.length === 0 && formData.value.pageNum > 1) {
                        formData.value.pageNum--;
                    }
                    // 清理ids参数
                    formData.value.ids = [];
                } else {
                    ElMessage.error("删除失败");
                }
                getAllComm();
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除操作',
            })
        })
}
//折扣价和原价判定
function validateNumber(field){
    const value = visitData.value[field];
    // 使用正则表达式匹配非数字字符
    const nonNumberRegex = /\D/g;
    const newVal = value.replace(nonNumberRegex, '');
    if (newVal!== value) {
        visitData.value[field] = newVal;
        ElMessage.warning('请输入数字');
    }
}
//重置添加输入框内容
function cancel() {
    dialogFormVisible.value = false;
    imageUrl.value = ""
    form.value = {
        imgUrl: ''
    }
    visitData.value = {
        id: "",
        courseName: "",
        courseImg: "",
        totalTime: "",
        videoCount: "",
        learningCount: "",
        courseIntroduction: "",
        applicablePerson: "",
        learningGain: "",
        subscriptionNotice: "",
        originalPrice: "",
        discountedPrice: "",
        classId: "",
        tutorId: "",
        del: "",
    }
    getAllComm()
}

</script>

<style scoped>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.el-link {
    padding: 0 5px;
}

.el-form {
    width: 1420px;
}

.el-input {
    width: 300px;
}

.form1 {
    width: 100%;
}

.el-pagination {
    margin-top: 25px;
}

.coordinates {
    margin-left: 10px;
}

.my-table :deep(th) {
    background-color: #1890ff;
    color: #ffffff;
    text-align: center;
}

.mendian {
    margin-bottom: 15px;
}

.active {
    color: green;
}

.c1 {
    color: #1890ff;
    cursor: pointer;
}

.c2 {
    color: red;
    cursor: pointer;
}

.table-img {
    width: 140px ;
    /* 根据需要调整图片宽度 */
    height: 120px;
    /* 根据需要调整图片高度 */
    object-fit: cover;
    /* 控制图片如何填充容器，cover会保持图片比例并填满容器 */
}

.avatar-uploader .avatar {
    padding: none;
    margin: 0 30px 0;
    width: 100px;
    height: 100px;
    display: block;
}

.el-icon.avatar-uploader-icon {
    padding: 0 30px 0;
    font-size: 28px;
    color: #8c939d;
    width: 78px;
    height: 78px;
    text-align: center;
}
.course-intro-truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; /* 这里设置为4行，可根据需求调整 */
  overflow: hidden;
}
</style>